<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:py="http://genshi.edgewall.org/"
      xmlns:xi="http://www.w3.org/2001/XInclude">
<xi:include href="webpyte_includes.html" />
<xi:include href="webpyte.html" />
<xi:include href="imageman_list.html" />
<head>
  <style>
    ul.ui-tabs-nav {
        margin: 4px 0;
    }
    .ui-tabs-nav li {
        display: inline;
        border : 1px solid #ddd;
        padding: .3em .5em;
        margin: 0;
        background-color:#eee;
    }
    .ui-tabs-nav li.ui-tabs-selected {
        background-color: #ffe;
    }
    .ui-tabs-panel {
        border: 1px solid #ddd;
        padding: 4px 9px;
        background-color: #ffe;
    }
    .ui-tabs-hide { display: none; }
  </style>
  ${ImageManListStyle()}
  ${import_jquery_ui()}
  <script src='/wp/jquery/jquery.contextmenu.r2.packed.js' />
  
</head>
<body>
  <div id="TabContainer">
    <ul>
        <li><a href="#Content"><span>Content</span></a></li>
        <li><a href="#Images"><span>Images</span></a></li>
        <li class='Upload'><a href="#Upload"><span>Upload</span></a></li>
    </ul>
    <div id="Content">
        <p>First tab is active by default:</p>
        <pre><code>$('#TabContainer > ul').tabs();</code></pre>
    </div>
    <div id="Images">
      ${ImageManList()}
    </div>
    <iframe id='Upload' src='${upload_url}' width='460' height='200' />
    <script>
      ${Markup("jtabs = $('#TabContainer > ul').tabs();")}
    </script>
  </div>
</body>
</html>
